<template>
  <div class="UserMessage">
    <div class="UserTop">
      <!-- 搜索 -->
      <el-input
        size="mini"
        style="width: 200px"
        v-model="form.name"
        clearable
        placeholder="请输入优惠卷标题"
      ></el-input>
      <el-select size="mini" v-model="form.type" placeholder="请选择优惠卷类型">
        <el-option label="通用领劵" :value="0"></el-option>
        <el-option label="注册赠券" :value="1"></el-option>
        <el-option label="兑换码" :value="2"></el-option>
      </el-select>
      <el-select
        size="mini"
        v-model="form.status"
        placeholder="请选择优惠卷状态"
      >
        <el-option label="正常" :value="0"></el-option>
        <el-option label="已过期" :value="1"></el-option>
        <el-option label="已下架" :value="2"></el-option>
      </el-select>

      <el-button
        size="mini"
        type="primary"
        icon="el-icon-search"
        @click="GetList"
        >查找</el-button
      >
      <el-button
        icon="el-icon-plus"
        size="mini"
        @click="AddModal"
        type="primary"
        >添加</el-button
      >
      <el-button
        size="mini"
        @click="handleDaochu"
        style="margin: 0 5px"
        icon="el-icon-download"
        type="primary"
        >导出</el-button
      >
    </div>
    <div class="UserMain">
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(245, 247, 250,0.5)"
        :data="tableData"
        border
        style="width: 100%"
        size="mini"
      >
        <el-table-column align="center" sortable prop="id" label="优惠卷ID">
        </el-table-column>
        <el-table-column align="center" prop="name" label="优惠卷名称">
        </el-table-column>
        <el-table-column align="center" prop="desc" label="介绍">
        </el-table-column>
        <el-table-column align="center" prop="tag" label="标签">
        </el-table-column>
        <el-table-column align="center" prop="min" label="最低消费">
          <template v-slot="{ row }"> 满{{ row.min }}元可以用 </template>
        </el-table-column>
        <el-table-column align="center" prop="discount" label="满减金额">
          <template v-slot="{ row }"> 减免{{ row.discount }}元 </template>
        </el-table-column>
        <el-table-column align="center" prop="limit" label="每人限额">
        </el-table-column>
        <el-table-column align="center" prop="goodsType" label="商品使用范围">
          <template v-slot="{ row }">
            <div v-if="row.goodsType == 0" type="success">全场通用</div>
            <div v-else>指定分类</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="type" label="优惠卷类型">
          <template v-slot="{ row }">
            <div v-if="row.type == 0" type="success">通用领劵</div>
            <div v-else-if="row.type == 1">注册赠券</div>
            <div v-else type="warning">兑换码</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="total" label="优惠卷数量">
        </el-table-column>
        <el-table-column align="center" prop="status" label="状态">
          <template v-slot="{ row }">
            <div v-if="row.status == 0" type="status">正常</div>
            <div v-else-if="row.status == 1">已过期</div>
            <div v-else type="warning">已下架</div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="360px">
          <template v-slot="{ row }">
            <el-button type="primary" @click="view(row.id)" size="mini"
              >详情</el-button
            >
            <el-button type="info" size="mini" @click="EditModal(row)"
              >编辑</el-button
            >
            <el-button size="mini" @click="Delete(row)" type="danger"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <p style="text-align: left">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </p>
    </div>
    <!-- 模态框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
    >
      <component
        v-if="dialogVisible"
        :is="SonComName"
        :currentRow="currentRow"
        @modalCancelEmit="dialogVisible = false"
        @modalSaveEmit="modalSaveEmit"
      ></component>
    </el-dialog>
    <!-- 模态框 -->
  </div>
</template>

<script>
// 导入插件
import * as XLSX from 'xlsx'

import { ListModel } from './config'
import { Couponlist, Coupondelete } from '@/api/tggl/yhjgl'
import { editModal, addModal } from './components/index'
export default {
  components: {
    addModal,
    editModal
  },
  data() {
    return {
      loading: false, //加载

      tableData: [], //表格
      form: {
        name: null,
        type: null,
        status: null
      },
      // 模态框
      dialogVisible: false,
      dialogTitle: '',
      dialogWidth: '50%',
      SonComName: '', //子页面名称切换
      currentRow: 1, //父传子
      // 模态框

      // 分页
      rows: 20, //每页几条
      page: 1, //第几页
      total: null, //分页总数
      currentPage: 1 //默认第一页
      // 分页
    }
  },
  methods: {
    // 导出
    handleDaochu() {
      // 创建一个workbook
      // 定义表头
      const headers = [
        '优惠卷ID',
        '优惠卷名称',
        '介绍',
        '标签',
        '最低消费',
        '满减金额',
        '每人限额',
        '最低消费',
        '商品使用范围',
        '优惠卷类型',
        '优惠卷数量',
        '状态'
      ] // 将表格数据转换为工作表数据

      const worksheetData = [
        headers, // 第一行为表头
        ...this.tableData.map((item) => [
          item.id,
          item.name,
          item.desc,
          item.tag,
          item.min,
          item.discount,
          item.limit,
          item.goodsType,
          item.success,
          item.type,
          item.total,
          item.status
        ])
      ] // 创建工作表

      const worksheet = XLSX.utils.aoa_to_sheet(worksheetData) // 创建工作簿

      const workbook = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1') // 导出 Excel 文件

      XLSX.writeFile(workbook, '关键词信息.xlsx')
    },
    // 子组件保存成功后回调
    modalSaveEmit() {
      this.dialogVisible = false //关闭模态框
      this.GetList() //重新加载数据
    },
    //打开Modal方法
    openDialog(modal) {
      this.dialogTitle = modal.Title
      this.dialogWidth = modal.Width
      this.SonComName = modal.Type
      this.dialogVisible = true
    },

    AddModal() {
      this.currentRow = 123 //父传子
      this.openDialog(ListModel.Add)
      console.log(ListModel.Add)
    },
    EditModal(row) {
      this.currentRow = row //编辑传递id
      console.log(row)

      this.openDialog(ListModel.Edit)
      console.log(ListModel.Edit)
    },
    view(id) {
      this.$router.push({
        path: '/promotion/couponDetail',
        query: {
          id: id
        }
      })
    },
    Delete(row) {
      // 使用 delete 操作符删除 deleted 属性
      delete row.deleted
      Coupondelete(row)
        .then((res) => {
          console.log(res)
          this.$notify({
            title: '删除成功',
            message: '这是一条成功的提示消息',
            type: 'success'
          })
          this.GetList()
        })
        .catch((err) => {
          this.$message.error('删除失败！')
        })
        .finally(() => {
          this.disabled = false
        })
    },
    //默认调用
    GetList() {
      this.loading = true
      Couponlist({
        page: this.page,
        limit: this.rows,
        sort: 'add_time',
        order: 'desc',
        name: this.form.name,
        type: this.form.type,
        status: this.form.status
      })
        .then((res) => {
          console.log(res)
          this.tableData = res.data.list
          this.total = res.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.rows = val
      this.GetList()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.page = val
      this.GetList()
    }
    // 分页
  },
  mounted() {
    this.GetList()
  }
}
</script>

<style lang="scss" scoped>
.UserMessage::v-deep {
  width: 100%;
  padding: 20px;
  box-sizing: border-box;

  .UserTop {
    margin-bottom: 20px;
  }

  .is-leaf {
    text-align: center;
  }

  .el-table__cell {
    text-align: center;
  }

  // background: bisque;
}
</style>